<template>
	<div class="page">
		<u-navbar>
			<view class="slot-wrap">
				<u-search placeholder="订单编号" v-model="searchForm.orderSn" @search="load" @custom="load"></u-search>
			</view>
		</u-navbar>
		<div class="drop-list" :style="{paddingTop:statusBarHeight + 'px' }">
			<div class="drop-list-tab">
				<u-tabs :list="list" active-color="#333" :is-scroll="false" :current="current" @change="changeTabs">
				</u-tabs>
			</div>
			<div class="drop-list-config" @click="handleClickScreen">
				<div>
					筛选
				</div>
			</div>
		</div>

		<!-- 订单列表 -->
		<div class="global-list" v-if="orderListData.length != 0">
			<div class="global-item" @click="handleClickOrder(item)" v-for="(item,index) in orderListData" :key="index">
				<!-- 订单来源，订单号，订单状态 -->
				<div class="flex global-top-col">
					<div class="global-sn">{{item.sn}}</div>
					<div class="global-orderStatus">{{item.orderStatus | orderStatusList}}</div>
				</div>
				<!-- 商品信息 -->
				<div class="flex goods-item" v-for="(goods,current) in item.orderItems" :key="current">
					<div>
						<u-image width="150" height="150" :src="goods.image" mode="" />
					</div>
					<div class="wes-2 goods-name">{{goods.name}}</div>
					<!-- 价格 -->
					<div class="flex goods-right-col">
						<div class="goods-price">￥{{goods.goodsPrice | unitPrice}}</div>
						<div>x <span>{{goods.num}}</span></div>
					</div>
				</div>

				<div class="global-bottom-col flex">
					<div class="global-createTime">{{item.createTime}}</div>

					<div class="global-clientType">{{item.clientType | orderClientType}}</div>
				</div>
				<div class="goods-follow-price">
					合计（含快递）<span>￥{{item.flowPrice| unitPrice}}</span>
				</div>

			</div>
		</div>
		<u-empty text="暂无更多订单" v-else mode="order"></u-empty>

		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>

		<popup memberName orderStatus date ref="popup" @callback="screened" />

	</div>
</template>

<script>
	import popup from "@/components/m-popup/index";
	import {
		getOrderList
	} from "@/api/order";
	let systemInfo = uni.getSystemInfoSync();
	export default {
		components: {
			popup,
		},
		data() {
			return {
				statusBarHeight: systemInfo.statusBarHeight,
				list: [{
						name: "商品订单",
					},
					{
						name: "虚拟订单",
					},
				],
				current: 0, //tab索引
				scrollTop: 0, //返回到顶部
				// 搜索框初始化对象
				searchForm: {
					pageNumber: 1, // 当前页数
					pageSize: 10, // 页面大小
					sort: "", // 默认排序字段
					order: "", // 默认排序方式
					startDate: "", // 起始时间
					endDate: "", // 终止时间
					orderSn: "",
					buyerName: "",
					orderStatus: "",
					orderType: "NORMAL",
				},
				orderListData: [], // 订单列表
			};
		},
		watch: {
			current(val) {
				this.searchForm.pageNumber = 1;
				this.orderListData = [];
				this.init();
			},
		},
		onShow() {
			this.orderListData = [];
			this.searchForm.pageNumber = 1;
			this.init();
		},
		onReachBottom() {
			this.searchForm.pageNumber++;
			this.init();
		},
		onLoad() {},
		mounted() {},
		methods: {
			// 点击tab
			changeTabs(index) {
				this.current = index;
			},
			// 点击筛选
			handleClickScreen() {
				this.$refs.popup.open();
			},
			load() {
				this.searchForm.pageNumber = 1
				this.orderListData = []
				this.init()
			},
			// 筛选完成回调
			screened(val) {

				/**
				 * 1.循环出相同的字段进行赋值
				 * 2.将不同的字段进行赋值
				 */
				for (let key in val) {
					this.searchForm[key] = this.searchForm[key] != undefined ? val[key] : ""
				}
				//需要后端 时间格式是否正确
				this.searchForm.startDate = val.date[0] ? val.date[0] : ""
				this.searchForm.endDate = val.date[1] ? val.date[1] : ""
				this.searchForm.buyerName = val.memberName ? val.memberName : ""
				this.load()

			},
			// 初始化数据
			async init() {
				uni.showLoading({
					title: "加载中",
				});
				this.current == 0 ?
					(this.searchForm.orderType = "NORMAL") :
					(this.searchForm.orderType = "VIRTUAL");
				//商品订单
				let res = await getOrderList(this.searchForm);
				if (res.data.success) {
					this.orderListData.push(...res.data.result.records);
				}

				uni.hideLoading();
			},

			// 点击订单
			handleClickOrder(val) {
				uni.navigateTo({
					url: `/pages/order/detail?sn=${val.sn}`,
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	@import '@/components/global.scss';




	@media screen and(min-width:750rpx) {
		/deep/ .u-navbar-inner {
			height: 100rpx !important;
		}

		/deep/ .u-navbar-placeholder {
			height: 100rpx !important;
		}
	}
</style>
